window.addEventListener('load',function(){

// 一、鼠标经过轮播图模块，左右按钮显示，离开左右按钮隐藏

// 1. 获取元素
var focus = document.querySelector(".focus");
var arrowl= document.querySelector(".arrow-l");
var arrowr= document.querySelector(".arrow-r");


var ul = document.querySelector("ul")
var ol = document.querySelector(".circle");

// 2. 进入轮播图
focus.addEventListener('mouseenter',function(){
    arrowr.style.display = 'block';
    arrowl.style.display = 'block';
    clearInterval(timer);

    timer = null;  //清除定时器变量

});
// 3. 离开轮播图
focus.addEventListener('mouseleave',function(){
    arrowr.style.display = 'none';
    arrowl.style.display = 'none';
    timer = setInterval(leftmove,2000)
    
});

// 二、鼠标不经过轮播图，轮播图会自动播放，经过时播放暂停
// 1. 切换功能===>动画
var focuswidth = focus.offsetWidth;
var num = 0;
// 控制小圆点的播放
var circle = 0;

// ul左移函数
function leftmove(){
// 
    if(num == ul.children.length - 1){
        // console.log(num);
        num = 0;
        ul.style.left = 0;
    }
    animate(ul,-(++num)*focuswidth);

    // 小圆点要一起变化
    circle++;
    if (circle == ol.children.length) {
        circle = 0
    }
    circleChange()
}
// 2. 定时器实现自动切换
var timer = setInterval(leftmove,1000)

// 3. 写入mouseenter和mouseleave事件
// 以上

// 三、点击左右按钮可以左右切换图片
// 克隆
var firstimg = ul.firstElementChild.cloneNode(true);
// console.log(firstimg);
ul.appendChild(firstimg)

// 右侧按钮绑定左移函数
arrowr.addEventListener('click',leftmove)
// 左侧按钮绑定右移函数
// 当图片为第一张时下一张为最后一张
function rightmove() {
    if (num === 0) {
        num = ul.children.length - 1
        ul.style.left = -num * focuswidth + 'px';
    }
    num--;
    animate(ul, -num * focuswidth);

    // 点击右侧按钮 ，小圆点要一起变化
    circle--;
    circle = circle < 0 ? ol.children.length - 1: circle
    circleChange()
}
arrowl.addEventListener('click',rightmove)

//动态生成小圆点  有几张图片 就生成几个小圆点
var ol = focus.querySelector('.circle');
// console.log(ul.children.length,"*")
for (var i = 0; i < ul.children.length-1; i++){
//  创建一个li
var li = document.createElement('li');
// 自定义属性index 值为索引号
li.setAttribute('index', i);
// 把li插入到ol里面
ol.appendChild(li);

//给小圆点添加点击事件
li.addEventListener('click', function () {
    //  清空所有ol中li的样式
    for (var j = 0; j < ol.children.length; j++){
    ol.children[j].className = "";
    }
    this.className = 'current';

    // 点击小圆点，移动图片  ul移动
    // 点击li  可以获取到当前li的索引号
    var ind = this.getAttribute('index');
    // console.log(ind,"ind")
    //  把点击的li的索引号给num
    num = ind;
    // 把li的索引和给cicle
    circle = ind;

    animate(ul, -ind * focuswidth);
})
}


// 控制小圆点样式
function circleChange () {
    // 排他思想
    for (var i = 0; i < ol.children.length; i++){
        ol.children[i].className = '';
    }
    ol.children[circle].className = "current"
}
    
// 把ol里面的第一个小li设置类名
ol.children[0].className = 'current';  

})
